<template>
  <div>
      <el-row :gutter="20">
        <el-col class="bg-purple" style="text-align:right;" :span=2>
        params:
        </el-col>
        <el-col class="bg-purple" :span=10>
        {{ params }}
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span=8>
            <el-input
            type="text"
            placeholder="请输入内容"
            v-model="msg"
            maxlength="10"
            show-word-limit />
        </el-col>
      </el-row>
      <el-row :gutter="20" style="background:#CCCCCC;">
          <el-col>
      <CC :msg="msg" @changeParam="setParams"></CC>
          </el-col>
      </el-row>
  </div>
</template>

<script>
import CC from '@/views/test/CC.vue'
export default {
  data () {
    return {
      msg: 0,
      params: 0
    }
  },
  components: {
    CC
  },
  methods: {
    setParams (v) {
      this.params = v
    }
  }
}
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}
.bg-purple {
    background: #d3dce6;
}
</style>
